
<template>
  <div class="app-container">
    <!--侧边部门数据-->
    <div class="head-container">
      <div class="crud-opts">
        <span class="crud-opts-left">
          <!--左侧插槽-->
          <slot name="left" />
          <el-button class="filter-item" type="primary" :icon="DocumentAdd" @click="Add">
            新增
          </el-button>
          <slot name="right" />
        </span>
      </div>
      <el-table :data="menuDatas" style="width: 100%" v-loading="crud.loading"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id">
        <el-table-column prop="name" label="菜单标题" />
        <el-table-column prop="remark" label="图标" width="80" />
        <el-table-column prop="orderNum" label="排序" width="80" />
        <el-table-column prop="router" :show-overflow-tooltip='true' label="路由" width="150" />
        <el-table-column prop="viewPath" label="文件路径" :show-overflow-tooltip='true' width="150" />
        <el-table-column prop="updatedAt" label="修改时间" width="160" />
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="scope">
            <udOperation :data="scope.row" @toEditData="toEditData" @reasonData="reasonData" />
          </template>
        </el-table-column>
      </el-table>



      <el-dialog append-to-body :close-on-click-modal="false" v-model="dialogFormVisible" :title="title" width="580px">

        <div>

        </div>
        <el-form ref="dataFormRef" :model="form" size="small" :rules="dataRules" label-width="80px">
          <el-form-item label="菜单类型" prop="type">


            <el-radio-group v-model="form.type">
              <el-radio-button :label="0">目录</el-radio-button>
              <el-radio-button :label="1">菜单
              </el-radio-button>
              <el-radio-button :label="2">按钮
              </el-radio-button>

            </el-radio-group>
          </el-form-item>

          <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
            <el-radio-group v-model="form.isShow" size="small">
              <el-radio-button label="false">是</el-radio-button>
              <el-radio-button label="true">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="form.type.toString() !== '2'" label="菜单标题" prop="name">
            <el-input v-model="form.name" placeholder=" 菜单标题" />
          </el-form-item>
          <el-form-item prop="icon" label="图标" class="popover-list">
            <el-popover ref="iconListPopover" v-model:visible="iconListVisible" placement="bottom-start" trigger="click"
              :width="450" popper-class="mod__menu-icon-popover">
              <template #reference>
                <el-input v-model="form.icon" :readonly="true" placeholder="图标" @click="iconListVisible = true">
                </el-input>
              </template>
              <div class="mod__menu-icon-inner">
                <div class="mod__menu-icon-list">
                  <el-button v-for="(item, index) in iconList" :key="index" :class="{ 'is-active': form.icon === item }"
                    @click="iconHandle(item)">
                    <svg-icon :icon="item"></svg-icon>
                  </el-button>
                </div>
              </div>
              <el-row justify="end">
                <el-button type="text" style="margin-right: 15px" @click="iconListVisible = false">关闭</el-button>
              </el-row>
            </el-popover>
          </el-form-item>

          <el-form-item v-show="form.type.toString() === '2'" label="按钮名称" prop="name">
            <el-input v-model="form.name" placeholder="按钮名称" />
          </el-form-item>
          <el-form-item v-show="form.type.toString() === '2'" label="权限标识" prop="perms">
            <el-input v-model="form.perms" placeholder="权限标识" />
          </el-form-item>

          <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
            <el-input v-model="form.router" placeholder="路由地址" />
          </el-form-item>
          <el-form-item label="菜单排序" prop="menuSort">
            <el-input-number v-model.number="form.orderNum" :min="0" :max="999" controls-position="right" />
          </el-form-item>
          <el-form-item v-show="form.type.toString() === '1'" label="组件路径" prop="component">
            <el-input v-model="form.viewPath" placeholder="组件路径" />
          </el-form-item>
          <el-form-item label="上级菜单" prop="parentId">
            <treeselect v-model="form.parentId" :options="menulist" placeholder="选择上级菜单" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:right ;">
          <el-button type="text" @click="reason">取消</el-button>
          <el-button :loading="loading" type="primary" @click="submit">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { pick } from 'lodash-es';
import crudROLE from '/@/api/system/role';
import { list, add, edit } from '/@/api/system/menu';
import { useRouter } from "vue-router";
import { formatMenu2Tree } from '/@/utils/utils';
import udOperation from "./model/udOperation.vue";
import eForm from "./model/form.vue";
import 'vue3-treeselect-ts/dist/style.css'
import Treeselect from 'vue3-treeselect-ts'
import { Search } from '@element-plus/icons-vue';
import { crud, CRUD } from '/@/crud/crud';
import { ElMessage } from 'element-plus'
import { Delete, Edit, DocumentAdd, Download, Upload } from '@element-plus/icons-vue'
import SvgIcon from "/@/components/svg-icon/index.vue";
import { ref, reactive, watch, computed, getCurrentInstance } from "vue";
import { getIconList } from '/@/utils/tool'
CRUD({ title: '菜单', url: 'admin/sys/menu/list', type: 'get', crudMethod: { ...crudROLE } })
const deptName = ref("");
const radio1 = ref('0')
const radio2 = ref('New York')
const radio3 = ref('New York')
const iconList = ref<string[]>([])
iconList.value = getIconList()
const iconListVisible = ref(false)
const loading = ref(false)
const dataFormRef = ref()
const dialogFormVisible = ref(false)
const title = ref("菜单新增")


const form = reactive({
  type: "0",
  name: null,
  parentId: -1,
  orderNum: 255,
  router: null,
  isShow: true,
  viewPath: null,
  icon: null,
  perms: '',
  menuId: '',
})
const { proxy } = getCurrentInstance();
const menuDatas = ref([]);
const menulist = ref([]);
// 图标点击事件
const iconHandle = (icon: string) => {
  form.icon = icon
  iconListVisible.value = false
}
const toEditData = (data) => {
  let datas = pick(data, 'type', 'name', "parentId", "orderNum", "router", "isShow", "viewPath", "icon", "perms")
  form.menuId = data.id
  Object.assign(form, datas)
  console.log(form);
  if (datas.parentId == null) {
    form.parentId = -1
  }
  dialogFormVisible.value = true
}

const reasonData = () => {
  getmenuDatas()
}
const dataRules = ref({
  name: [{ required: true, message: '请输入标题不能为空', trigger: 'blur' }],
  parentId: [{ required: true, message: '请选择上级类目', trigger: 'blur' }]
})

const defaultProps = { children: 'children', label: 'name', isLeaf: 'leaf' }
const defaultPropstree = {
  children: 'children',
  label: 'label',
}
//取消弹框
const reason = () => {
  dialogFormVisible.value = false
}
const Add = () => {
  if (dataFormRef.value) {
    dataFormRef.value.resetFields()
  }
  dialogFormVisible.value = true

}
const submit = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false
    } else {
      if (form.menuId) {

        edit(form).then((res: any) => {
          if (res.code == 200) {
            ElMessage.success('修改成功');
            getmenuDatas()
            dialogFormVisible.value = false
          } else {
            dialogFormVisible.value = false
          }

        })

      } else {

        delete form.menuId;
        add(form).then((res: any) => {
          if (res.code == 200) {
            ElMessage.success('新增成功');
            getmenuDatas()
            dialogFormVisible.value = false
          } else {
            dialogFormVisible.value = false
          }

        })
      }

    }


  })
}

const getmenuDatas = () => {
  list({}).then((res: any) => {

    menuDatas.value = formatMenu2Tree(JSON.parse(JSON.stringify(res.data)))

    menulist.value = [{
      children: formatMenu2Tree(JSON.parse(JSON.stringify(res.data))),
      createdAt: "2022-05-19 21:28:21",
      formData: {},
      icon: "wenjian",
      id: -1,
      isShow: true,
      keepalive: true,
      key: -1,
      keyPath: [],
      label: "顶级类目",
      leaf: null,
      name: "顶级类目",
      orderNum: 1,
      parentId: null,
      perms: null,
      router: "",
      title: "顶级类目",
      type: 0,
      updatedAt: "2022-05-19 21:28:21,",
      value: -1,
      viewPath: "",


    }]

    console.log(menuDatas.value)

  })
}
getmenuDatas()






</script>
<style lang="scss" scoped>
.role-span {
  font-weight: bold;
}

.mod__menu {
  ::v-deep(.el-popover.el-popper) {
    overflow-x: hidden;
  }

  .popover-list {
    ::v-deep(.el-input__inner) {
      cursor: pointer;
    }

    ::v-deep(.el-input__suffix) {
      cursor: pointer;
    }
  }

  &-icon-inner {
    width: 100%;
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;

    // 滚动条的宽度
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background: transparent;
    }

    // 滚动条的设置
    &::-webkit-scrollbar-thumb {
      background-color: #dddddd;
      background-clip: padding-box;
      min-height: 28px;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #bbb;
    }
  }

  &-icon-list {
    width: 458px !important;
    padding: 0;
    margin: -8px 0 0 -8px;

    >.el-button {
      padding: 8px;
      margin: 18px 0 0 8px;

      >span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
}
</style>